<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
<link rel="stylesheet" type="text/css" href="apps/calendar/calendar.css" />

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script language="JavaScript" src="apps/calendar/calendar_vi.js"></script>

<!--configuration confirm dialog-->
<script type="text/javascript" src="apps/confirm/jquery.hs_confirm.js"></script>
<link rel="stylesheet" type="text/css"
	href="apps/confirm/hs_confirm.css" />

<script type='text/javascript'>
	$(document)
			.ready(
					function(e) {
						var orig_birthday;
						var orig_displayname;
						var orig_address;
						var orig_job;
						var orig_schoolname;
						var orig_email;
						var orig_sex;

						function getOrginValue() {
							orig_birthday = $('#txtBirthday').val();
							orig_displayname = $('#txtDisplayName').val();
							orig_address = $('#txtAddress').val();
							orig_job = $('#txtJob').val();
							orig_schoolname = $('#txtSchoolName').val();
							orig_email = $('#txtEmail').val();
							orig_sex = $(':radio:checked').val();
						}

						getOrginValue();

						/*select text when focus*/
						$(':text, :password').focus(function(e) {
							$(this).select();
						});

						/*active button confirm information '#txtBirthday, , #txtAddress, #txtJob, #txtSchoolName, #txtEmail*/
						/* $('#txtDisplayName').blur(function(e) {
							var tr = $(this).parent();
							alert(tr.filter('input:hidden').val());
							activeButton($('#confirmInfor'), false);
						}); */

						/*check newpass is different currentpass*/
						$('#txtNewPass, #txtCurrentPass').blur(function(e) {
							isDifferent();
						});

						function isDifferent() {
							if ($('#txtNewPass').val().length != 0
									&& $('#txtCurrentPass').val().length != 0) {
								if ($('#txtNewPass').val() == $(
										'#txtCurrentPass').val()) {
									$('#lblNewPass').text(
											'Phải khác mật khẩu hiện tại');
								} else {
									$('#lblNewPass').text('');
									$('#lblCurentPass').text('');
									return true;
								}
							}
							return false;
						}

						/*check newpass and cofirmpass*/
						$('#txtNewPass, #txtConfirmPass').blur(function(e) {
							isSame();
						});

						function isSame() {
							if ($('#txtNewPass').val().length != 0
									&& $('#txtConfirmPass').val().length != 0) {
								if ($('#txtNewPass').val() != $(
										'#txtConfirmPass').val()) {
									$('#lblConfirmPass').text(
											'Xác nhận mật khẩu không phù hợp');
								} else {
									$('#lblConfirmPass').text('');
									return true;
								}
							}
							return false;
						}

						/*check change value*/
						function checkValueIsOrig() {
							return $('#txtBirthday').val() == orig_birthday
									&& $('#txtDisplayName').val() == orig_displayname
									&& $('#txtAddress').val() == orig_address
									&& $('#txtJob').val() == orig_job
									&& $('#txtEmail').val() == orig_email
									&& $('#txtSchoolName').val().trim() == orig_schoolname
									&& $(':radio:checked').val() == orig_sex;
						}

						/*change infor form*/
						$('#confirmInfor')
								.click(
										function(e) {
											if (!checkValueIsOrig()) {
												$
														.ajax(
																{
																	url : $(
																			'#inforForm')
																			.attr(
																					'action'),
																	type : $(
																			'#inforForm')
																			.attr(
																					'method'),
																	datatype : 'text',
																	data : $(
																			'#inforForm')
																			.serialize(),
																	success : function(
																			data) {
																		$
																				.openDialog({
																					text : data,
																					warning : true,
																					confirmText : 'Đồng ý',
																					color : '#4A4AFF',
																					border : '3px solid #4A4AFF'
																				});
																		getOrginValue();
																	}
																})
														.fail(
																function() {
																	$
																			.openDialog({
																				text : 'Không thể gửi dữ liệu lên server, liên hệ Admin để được hỗ trợ',
																				warning : true,
																				confirmText : 'Đồng ý',
																				color : '#4A4AFF',
																				border : '3px solid #4A4AFF'
																			});
																});
											} else {
												$
														.openDialog({
															text : 'Không cần submit form',
															warning : true,
															confirmText : 'Đồng ý',
															color : '#4A4AFF',
															border : '3px solid #4A4AFF'
														});
											}
										});

						/*subit form change password*/
						$('#submitChangePass')
								.click(
										function(e) {
											if (!checkFormChangePass()) {
												$
														.openDialog({
															text : 'Bạn đã nhập thiếu trường hoặc thông tin trường không hợp lệ<br>Vui lòng xem lại các trường',
															warning : true,
															confirmText : 'Nhập lại',
															color : '#4A4AFF',
															border : '3px solid #4A4AFF'
														});
											} else {
												// ajax submit form
												$
														.ajax(
																{
																	url : $(
																			'#changePassForm')
																			.attr(
																					'action'),
																	datatype : 'text',
																	type : $(
																			'#changePassForm')
																			.attr(
																					'method'),
																	data : $(
																			'#changePassForm')
																			.serialize(),
																	success : function(
																			data) {
																		$
																				.openDialog({
																					text : data,
																					warning : true,
																					confirmText : 'Đồng ý',
																					color : '#4A4AFF',
																					border : '3px solid #4A4AFF'
																				});
																	}
																})
														.fail(
																function() {
																	$
																			.openDialog({
																				text : 'Không thể gửi dữ liệu lên server, liên hệ Admin để được hỗ trợ',
																				warning : true,
																				confirmText : 'Đồng ý',
																				color : '#4A4AFF',
																				border : '3px solid #4A4AFF'
																			});
																});
											}
										});

						/*check valid form before submit (change pass form)*/
						function checkFormChangePass() {
							var notEmpty = $('#txtCurrentPass').val().length != 0;
							if (!notEmpty) {
								$('#lblCurrentPass').text(
										'Nhập mật khẩu hiện tại');
								return false;
							} else {
								$('#lblCurrentPass').text('');

								var isDiff = isDifferent();
								var isSme = isSame();

								if (!isDiff)
									$('#lblNewPass').text(
											'Chưa nhập mật khẩu mới');
								if (!isSme)
									$('#lblConfirmPass').text(
											'Xác nhận mật khẩu không phù hợp');
								return isDiff && isSme;
							}
						}

						/*check valid file*/
						function checkValidFile(file) {
							var fSize = file.size / 1024; // kbyte

							if (fSize > 180) {
								$
										.openDialog({
											text : 'Kích thước file không được lớn hơn 180Kb',
											warning : true,
											confirmText : 'Đồng ý',
											color : '#4A4AFF',
											border : '3px solid #4A4AFF'
										});
							} else {
								var fName = file.name;
								var exts = [ 'png', 'jpg' ];
								var get_ext = fName.split('.');
								get_ext = get_ext.reverse();

								if ($.inArray(get_ext[0].toLowerCase(), exts) > -1) {
									return true;
								} else {
									$
											.openDialog({
												text : 'File ảnh không hợp lệ! Chỉ chấp nhận các định dạng PNG, JPG',
												warning : true,
												confirmText : 'Đồng ý',
												color : '#4A4AFF',
												border : '3px solid #4A4AFF'
											});
								}
							}
							return false;
						}

						/*change avatar*/
						$('input.upload')
								.change(
										function(e) {
											if (checkValidFile($(this)[0].files[0])) {
												$('body')
														.append(
																"<div id='over'></div>");
												$('#nof').fadeIn(300);
												var data = new FormData();
												$
														.each(
																$('input.upload')[0].files,
																function(i,
																		file) {
																	data
																			.append(
																					'file-'
																							+ i,
																					file);
																});

												$
														.ajax(
																{
																	url : $(
																			'#changeAvatarForm')
																			.attr(
																					'action'),
																	type : $(
																			'#changeAvatarForm')
																			.attr(
																					'method'),
																	data : data,//$('#changeAvatarForm').serializefiles(),
																	processData : false,
																	contentType : false,
																	enctype : 'multipart/form-data',
																	success : function(
																			data) {
																		$(
																				'#nof')
																				.hide();
																		$(
																				'#over')
																				.remove();
																		$
																				.openDialog({
																					text : data,
																					warning : true,
																					confirmText : 'Đồng ý',
																					color : '#4A4AFF',
																					border : '3px solid #4A4AFF'
																				});
																	}
																})
														.fail(
																function() {
																	$('#nof')
																			.css(
																					'display',
																					'none');
																	$('#over')
																			.remove();
																	$
																			.openDialog({
																				text : 'Không thể gửi dữ liệu, vui lòng liên hệ Admin để được hỗ trợ',
																				warning : true,
																				confirmText : 'Đồng ý',
																				color : '#4A4AFF',
																				border : '3px solid #4A4AFF'
																			});
																});
											}
										});

						/*active button*/
						function activeButton(name, active) {
							name.prop('disabled', active);
						}
					});
</script>

<style type="text/css">
fieldset {
	padding: 5px;
}

/* .button {
	width: 145px;
} */
table tr td {
	height: 25px;
	text-align: right;
}

.txt {
	width: 100%;
	border: none;
	background: none;
	border-bottom: 1px dotted;
	margin-left: 5px;
	padding-left: 2px;
}

label {
	margin-right: 15px;
}

.nof {
	margin-left: 15px;
	color: red;
}

#frame {
	float: left;
	border: 1px solid;
	position: relative;
	margin: 5px 9px 0 5px;
}

.fileUpload {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	display: inline-block;
	color: #fff;
	border: 1px solid transparent;
	width: 98px;
	height: 27px;
	line-height: 27px;
	text-align: center;
	opacity: 0.2;
	background: #666;
	bottom: 0;
	left: 0;
}

.fileUpload input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity = 0);
}

.fileUpload span {
	background: url("images/people_add.png") no-repeat left center;
	padding-left: 18px;
}

.fileUpload:hover {
	opacity: 0.8;
}

input[type=radio] {
	margin-right: 5px;
}

.col1 {
	width: 153px;
}

.col2 {
	text-align: left;
	width: 540px;
}

.col3 {
	text-align: left;
	width: 570px;
}

#over {
	position: fixed;
	left: auto;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	opacity: 0.8;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	opacity: 0.45;
	background: #000;
	height: 100%;
}

#nof {
	position: fixed;
	top: 40%;
	left: 40%;
	height: 120;
	line-height: 120px;
	width: 240px;
	text-align: center;
	z-index: 9999;
	background-color: white;
	border-radius: 1px;
	display: none;
}

#nof span {
	background: url("images/loading2.gif") no-repeat left center;
	padding-left: 20px;
	font-size: 18px;
	font-weight: bold;
}

#wrapper {
	background: #e9e9e9;
}
</style>
<title>Personal Page</title>
</head>
<body>
	<%@ include file="Header.jsp"%>
	<div id="wrapper">
		<c:set var="img">
			<c:choose>
				<c:when test="${not empty account_info.avatar}">
				${account_info.avatar}
				</c:when>
				<c:otherwise>
				images/default_avatar.png
				</c:otherwise>
			</c:choose>
		</c:set>

		<div id="frame" style="height: 100px; width: 100px;">
			<img style="height: 100%; width: 100%;" src="avatar/${img}"
				alt="avatar" />
			<c:if
				test='${not empty account && (account.type=="Admin" || account.id==account_info.id)}'>
				<div class="fileUpload">
					<span>Đổi avatar</span>
					<form id="changeAvatarForm"
						action="?do=changeAvatar&uid=${account.id}" method="post"
						enctype="multipart/form-data">
						<input type="file" class="upload" />
					</form>
				</div>
			</c:if>
		</div>

		<div>
			ID: ${account_info.id} <br /> Tên tài khoản:
			${account_info.username} <br /> Số bài viết:
			${account_info.numPosts} <br /> Huy hiệu: None <br /> Quyền hạn:
			${account_info.type} <br />Ngày tham gia: ${account_info.joinString}
		</div>
		<div style="clear: both; margin-bottom: 20px;"></div>
		<fieldset>
			<legend>Thông tin tài khoản</legend>
			<form id='inforForm' name='formInfor'
				action="?do=changeInfo&uid=${account.id}" method="post">
				<table>
					<tr>
						<td>Sinh nhật:</td>
						<td><input type="text" class="txt" id="txtBirthday"
							name="txtBirthday" value="${account_info.birthdayString}" /></td>
						<c:if test="${account.id==account_info.id||account.type=='Admin'}">
							<td style="text-align: left; padding-left: 10px;"><script
									language="JavaScript">
								new tcal({
									'formname' : 'inforForm',
									'controlname' : 'txtBirthday'
								});
							</script></td>
						</c:if>
					</tr>
					<tr>
						<td>Tên hiển thị:</td>
						<td colspan="2"><input type="text" class="txt"
							id='txtDisplayName' name="txtDisplayName"
							value="${account_info.displayName}" /></td>
					</tr>
					<tr>
						<td>Nơi sống:</td>
						<td colspan="2"><input type="text" class="txt"
							id='txtAddress' name="txtAddress"
							value="${account_info.address!=null?account_info.address:'Chưa rõ'}" /></td>
					</tr>
					<tr>
						<td>Công việc hiện tại:</td>
						<td colspan="2"><input type="text" class="txt" id='txtJob'
							name="txtJob"
							value="${account_info.job!=null?account_info.job:'Chưa rõ'}" /></td>
					</tr>
					<tr>
						<td>Tên trường:</td>
						<td colspan="2"><input type="text" class="txt"
							id='txtSchoolName' name="txtSchoolName"
							value="${account_info.schoolName!=null?account_info.schoolName:'Chưa rõ'}" /></td>
					</tr>
					<tr>
						<td>Email:</td>
						<td colspan="2"><input type="text" class="txt" id='txtEmail'
							name="txtEmail"
							value="${account_info.email!=null?account_info.email:'Chưa rõ'}" /></td>
					</tr>
					<tr>
						<td class="col1">Giới tính:</td>
						<td class="col2"><label><input type="radio"
								name="sex" value="male"
								${account_info.sex == 'Nam'?'checked':''}
								${account_info.id==account.id||account.type=='Admin'?'':'disabled'}
								style="margin-left: 5px" />Nam</label> <label><input
								type="radio" name="sex" value="female"
								${account_info.sex == 'Nữ'?'checked':''}
								${account_info.id==account.id||account.type=='Admin'?'':'disabled'} />Nữ</label>
							<label><input type="radio" name="sex" value="none"
								${account_info.sex == 'Chưa xác định'?'checked':''}
								${account_info.id==account.id||account.type=='Admin'?'':'disabled'} />Chưa
								xác định</label></td>
					</tr>
					<c:if
						test='${account.type=="Admin" || account_info.id == account.id}'>
						<tr>
							<td colspan="3"><input type="button" class="button"
								id='confirmInfor' value="Xác thực thông tin" /></td>
						</tr>
					</c:if>
				</table>
			</form>
		</fieldset>
		<br />

		<c:if test='${account.id == account_info.id}'>
			<fieldset>
				<legend>Thay đổi mật khẩu</legend>
				<form id='changePassForm' action="?do=changePass" method="post">
					<input type='hidden' name='id' value='${account_info.id}' />
					<table>
						<tr>
							<td class="col1">Mật khẩu hiện tại:</td>
							<td class="col3"><input type="password" class="txt"
								id='txtCurrentPass' name="txtCurrentPass" value='' /></td>
							<td><label id="lblCurrentPass" class='nof'></label></td>
						</tr>
						<tr>
							<td>Nhập mật khẩu mới:</td>
							<td><input type="password" class="txt" id='txtNewPass'
								name="txtNewPass" value="" /></td>
							<td><label id="lblNewPass" class='nof'></label></td>
						</tr>
						<tr>
							<td>Nhập lại mật khẩu mới:</td>
							<td><input type="password" class="txt" id='txtConfirmPass'
								name="txtConfirmPass" value="" /></td>
							<td><label id="lblConfirmPass" class='nof'></label></td>
						</tr>
						<tr>
							<td colspan="2"><input type="button" class="button"
								id='submitChangePass' value="Đổi mật khẩu" /></td>
						</tr>
					</table>
				</form>
			</fieldset>
		</c:if>
	</div>
	<div id='nof'>
		<span>Vui lòng chờ</span>
	</div>
	<%@ include file='Footer.jsp'%>
</body>
</html>